<template>
	<view class="container">
		<view class="list">
			<view class="item" v-for="(item, index) in baseList" :key="index">
				<view class="item-header">
					<text class="item-title">{{ item.dzname }}</text>
					<view class="item-actions">
						<view class="icon-wrapper cursor-pointer" @click="handleEdit(item.wbdzid)">
							<uni-icons type="compose" size="20" color="#666666" />
						</view>
						<view class="icon-wrapper cursor-pointer" @click="handleDelete(index)">
							<uni-icons type="trash" size="20" color="#666666" />
						</view>
					</view>
				</view>
				<view class="item-content">
					<view class="param-row">
						<text class="param-label">上底座：</text>
						<view class="param-group">
							<view class="param-item">
								<text class="param-name">长：</text>
								<text class="param-value">{{ item.dzslen }}</text>
							</view>
							<view class="param-item">
								<text class="param-name">高：</text>
								<text class="param-value">{{ item.dzsheight }}</text>
							</view>
						</view>
					</view>
					<view class="param-row">
						<text class="param-label">下底座：</text>
						<view class="param-group">
							<view class="param-item">
								<text class="param-name">长：</text>
								<text class="param-value">{{ item.dzxlen }}</text>
							</view>
							<view class="param-item">
								<text class="param-name">高：</text>
								<text class="param-value">{{ item.dzxheight }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<button class="btn btn-default" @click="handleInstruction">设置说明</button>
			<button class="btn btn-primary" @click="handleAdd(currentType)">新增底座</button>
		</view>
	</view>
</template>



<script lang="ts" setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		useRoute
	} from 'vue-router'; // 导入路由对象
	import wbdz from '../../../api/wanbi/wbdz';
	import { onShow } from '@dcloudio/uni-app';
	import wanbioVue from '../wanbio.vue';

	
	const baseList = ref  ([
		
	]);
	// 定义响应式变量
	const currentType = ref < number > (0); // 初始化默认值
	// 获取路由对象
	const route = useRoute();
		// 从路由 query 中获取 type 参数
		const type = route.query.type;
		// 类型检查和转换
		if (type !== undefined && typeof type === 'string') {
		 currentType.value = parseInt(type);
		}
	//生命周期函数
	onMounted(() => {
		wbdz.listByProId(currentType.value).then((res: any) => {
			console.log(res)
			// 响应式数据
			baseList.value = res.data;
		})
	})
	const handleEdit = (wbdzid: number) => {
		uni.navigateTo({
			url: `/pages/wanbi/wbdz/wbdzEdit?dzid=${wbdzid}`
		})
	};
	const handleDelete = (index: number) => {
		uni.showModal({
			title: '提示',
			content: '确定要删除该底座吗？',
			success: (res) => {
				if (res.confirm) {
					wbdz.deleteById(baseList.value[index].wbdzid);
					baseList.value.splice(index, 1);
					uni.showToast({
						title: '删除成功',
						icon: 'success'
					});
				}
			}
		});
	};
	const handleAdd = (type:number) => {
		uni.navigateTo({
			url: `/pages/wanbi/wbdz/wbdzAdd?type=${type}`
		})
	};
	const handleInstruction = () => {
		uni.showToast({
			title: '查看设置说明',
			icon: 'none'
		});
	};
	onShow(() => {
	    wbdz.listByProId(currentType.value).then((res: any) => {
	        baseList.value = res.data;
	    });
	});
</script>
<style>
	page {
		height: 100%;
		background-color: #f5f5f5;
	}

	.container {
		min-height: 100%;
		display: flex;
		flex-direction: column;
		padding: 20rpx;
	}

	.list {
		flex: 1;
		padding-bottom: 120rpx;
	}

	.item {
		background-color: #ffffff;
		border-radius: 12rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
	}

	.item-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.item-title {
		font-size: 16px;
		color: #333333;
		font-weight: 500;
	}

	.item-actions {
		display: flex;
		align-items: center;
	}

	.icon-wrapper {
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.item-content {
		padding: 0 10rpx;
	}

	.param-row {
		display: flex;
		margin-bottom: 16rpx;
	}

	.param-row:last-child {
		margin-bottom: 0;
	}

	.param-label {
		width: 120rpx;
		color: #666666;
		font-size: 14px;
	}

	.param-group {
		flex: 1;
		display: flex;
		justify-content: flex-end;
	}

	.param-item {
		display: flex;
		align-items: center;
		margin-right: 40rpx;
		justify-content: space-between;
		/* width: 120rpx; */
	}

	.param-name {
		color: #666666;
		font-size: 14px;
	}

	.param-value {
		color: #333333;
		font-size: 14px;
		margin-left: 8rpx;
		text-align: right;
	}

	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		padding: 20rpx;
		background-color: #ffffff;
		display: flex;
		justify-content: space-between;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.btn {
		flex: 1;
		margin: 0 10rpx !important;
		font-size: 14px;
	}

	.btn-default {
		color: #e51c23 !important;
		background-color: #ffffff !important;
		border: 1px solid #e51c23 !important;
		border-radius: 30rpx !important;
	}

	.btn-primary {
		color: #ffffff !important;
		background-color: #e51c23 !important;
		border-radius: 30rpx !important;
	}

	.cursor-pointer {
		cursor: pointer;
	}
</style>
